<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>32-实例的生命周期</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style></style>
  </head>
  <body>
    <div id="app">
      <div>{{msg}}</div>
      <button @click="update">更新</button>
      <button @click="destory">销毁</button>
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          msg: '生命周期',
        },
        methods: {
          update: function () {
            this.msg = 'hello 更新';
          },
          destory: function () {
            this.$destroy();
          },
        },
        beforeCreate: function () {
          console.log('1 - 开始创建vm');
        },
        created: function () {
          console.log('2 - vm创建完成');
        },
        beforeMount: function () {
          console.log('3 -给vm挂载数据和方法');
        },
        mounted: function () {
          console.log('4 -数据和方法挂载完成');
        },
        // ------------------- 更新
        beforeUpdate: function () {
          console.log('5 - 开始更新');
        },
        updated: function () {
          console.log('6- 数据更新完成');
        },
        // ---------------------- 销毁
        beforeDestroy: function () {
          console.log('7 - 开始启动销毁');
        },
        destroyed: function () {
          console.log('8 - vm 示例已被销毁');
        },
      });
    </script>
  </body>
</html>
